<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义滚条</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 300px;
			height: 300px;
			background-color: red;
			position: absolute;
			left: 0;
			top: 0;
		}
		
	</style>
	<body style="height: 3000px;">
		
		<div class="box"></div>
		<script>
			let oBox = document.querySelector('.box')
			let eventName = document.createElement('div').onmousewheel===null?'mousewheel':'DOMMouseScroll'
			oBox.addEventListener(eventName,function(e){
				e.preventDefault()
				let  detail = e.wheelDelta?e.wheelDelta/150:e.detail/-3
			})
			
			// oBox.addEventListener('DOMMouseScroll',function(){
			// 	console.log(666666);
			// })
			
			
			
			// let eventName = document.createElement('p').onmousewheel === null?'mousewheel':'DOMMouseScroll'
			// oBox.addEventListener(eventName,function(e){
			// 	// e.detail 火狐可用 往下 3 往上-3
			// 	//e.wheelDelta 在谷歌用  往下 -150 往上150
			// 	let detail = e.detail?-e.detail/3:e.wheelDelta/150
			// 	e.preventDefault()
			// 	if(detail>0){
			// 		console.log('往上滚动');
			// 	}else{
			// 		console.log('往下滚动');
			// 	}
			// })
		
		</script>
	</body>
</html>
